:host {
  transition: height .28s ease-out, width .28s ease-out;
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-align: left;
  white-space: nowrap;
  vertical-align: top;
}

#content, #snapshot {
  transition: opacity .28s ease-out;
  display: inline-block;
}
:host(.swapping) #content, :host(.swapping) #snapshot {
  transition: none;
}

#content {
  opacity: 1;
}
#snapshot {
  opacity: 0;
  /* Note that #snapshot _must_ come before #content in the DOM for this! */
  position: absolute;
  pointer-events: none;
}

:host(.swapping) #content {
  opacity: 0;
}
:host(.swapping) #snapshot {
  opacity: 1;
}
